<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
	<style>
		/*全部*/
		body li{list-style-type:none;}
		/*头部*/
		header{height:150px;background:#ABCDEF;} 
		/*内容*/
		div{height:700px;margin:10px 0 10px 0;}
		section{float:left;height:700px;background:#ff8000;;width:60%;}
		section video{margin-left:5%;}
		section button{width:100px;height:50px;text-alige:center;float:left;color:#000;margin-left:5%;}
		aside{color:#fff;float:right;height:700px;background:#008000; width:35%;}
		/*尾部*/
		footer{height:100px;background:#8000ff;clear:both;}
	</style>	
</head>
<body>
	<header>
		<p>这是HEADER标签</p>
	</header>
	<div>
		<section>
			<p>这是SECTION标签</p>
			<audio controls loop>
				<source src="./music/music.mp3" type="video/mpeg">
				<source src="./video/movie.ogg" type="video/ogg">
				您的浏览器暂不支持audio标签。
			</audio>
			<video src='./video/movie.webm' controls id="video_id">
				video的API
			</video>
			<button onclick="palyControls(0);">播放</button>
			<button onclick="palyControls(1);">停止</button>
			<button onclick="palyControls(2);">加载</button>
			<button onclick="palyControls(3);">快进</button>
			<button onclick="palyControls(4);">快退</button>
			<button onclick="palyControls(5);">视频长度</button>
			<button onclick="palyControls(6);">开起静音</button>
			<button onclick="palyControls(7);">网络状态</button>
			<button onclick="palyControls(8);">是否暂停</button>
			<button onclick="palyControls(10);">慢速三倍</button>
			<button onclick="palyControls(11);">快速三倍</button>
			<button onclick="palyControls(12);">正常速度</button>
			<button onclick="palyControls(13);">调高声音</button>
			<button onclick="palyControls(14);">调低声音</button>
			<script>
				function palyControls(v){
					var o = document.getElementById('video_id');
					switch(v){
						case 0:
						o.play(); //开始播放
						break;
						case 1:
						o.pause(); //停止播放
						break;
						case 2:
						o.load(); //重新加载
						break;
						case 3:
						o.currentTime+=10; //快进10秒
						break;
						case 4:
						o.currentTime-=10; //快退10秒
						break;
						case 5:
						alert(o.duration); //显示播放总长（单位：秒）
						break;
						case 6:
						if(o.muted){
							var value = false;
						}else{
							var value = true;
						}
						o.muted = value; //是否静音
						break;
						case 7:
						alert(o.networkState); //当前网络状态
						break;
						case 8:
						o.paused; //是否暂停（DAD）
						break;
						case 9:
						alert(o.played); //当前播放的时间
						break;
						case 10:
						o.playbackRate=1/3;//慢速3倍
						break;
						case 11:
						o.playbackRate=3;//快三倍速度
						break;
						case 12:
						o.playbackRate=1;//正常速度
						break;
						case 13:
						o.volume+=0.1;//调高声音
						break;
						case 14:
						o.volume-=0.1;//调低声音
						break;
					}
				}
				setTimeout('palyControls(9)',2000);
			</script>
			<!--
			<hr>
			<video controls="controls" loop poster="./image/att050.jpg">
				<source src='./video/movie.webm' type="video/webm">
				<source src='./video/movie.ogg' type="video/ogg">	
				IE浏览器不支持视频。
			</video>
			<hr>
			<video src='./video/movie.ogg' width="200" height="200" controls="controls"></video>
			-->
		</section>
		<aside>
			<dt>video标签</dt>
			<dd>source:（内嵌标签）多浏览器视频选择项。type属性指定视频类型。</dd>
			<dd>controls:显示播放控制</dd>
			<dd>autoplay:自动播放视频</dd>
			<dd>width:视频宽度</dd>
			<dd>height:视频高度</dd>
			<dd>loop:是否循环播放</dd>
			<dd>poster:视频封面图片</dd>
			<dd>autobuffer:设制浏览器缓冲方式，不设置autoplay才有效</dd>
		</aside>
	</div>
	<footer>
		<p>这是FOOTER标签</p>	
		<hr>
		<small>联系我们</small><small>合作伙伴</small><small>联系我们</small><small>合作伙伴</small><small>联系我们</small><small>合作伙伴</small>
	</footer>
</body>
</html>